<template>
  <view class="change-password-page">
    <!-- 装饰背景气泡 -->
    <view class="bubble bubble-1 floatSoft"></view>
    <view class="bubble bubble-2 floatSoft"></view>
    <view class="bubble bubble-3 floatSoft"></view>
    <view class="bubble bubble-4 floatSoft"></view>
    
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="back-button" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="page-title">修改密码</text>
      <view class="header-placeholder"></view>
    </view>

    <!-- 主内容区域 -->
    <view class="content-wrapper">
      <!-- 密码表单卡片 -->
      <view class="password-card">
        <!-- 原密码 -->
        <view class="form-group">
          <label class="input-label">原密码</label>
          <view class="input-wrapper">
            <input 
              :type="showOldPassword ? 'text' : 'password'" 
              v-model="form.oldPassword" 
              placeholder="请输入您的当前密码" 
              class="form-input"
            />
            <view 
              class="eye-icon"
              @click="toggleOldPasswordVisibility"
            >
              <text>{{ showOldPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </view>
          </view>
        </view>

        <!-- 新密码 -->
        <view class="form-group">
          <label class="input-label">新密码</label>
          <view class="input-wrapper">
            <input 
              :type="showNewPassword ? 'text' : 'password'" 
              v-model="form.newPassword" 
              placeholder="请输入新密码，至少8个字符" 
              class="form-input"
            />
            <view 
              class="eye-icon"
              @click="toggleNewPasswordVisibility"
            >
              <text>{{ showNewPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </view>
          </view>
        </view>

        <!-- 确认新密码 -->
        <view class="form-group">
          <label class="input-label">确认新密码</label>
          <view class="input-wrapper">
            <input 
              :type="showConfirmPassword ? 'text' : 'password'" 
              v-model="form.confirmPassword" 
              placeholder="请再次输入新密码" 
              class="form-input"
            />
            <view 
              class="eye-icon"
              @click="toggleConfirmPasswordVisibility"
            >
              <text>{{ showConfirmPassword ? '👁️' : '👁️‍🗨️' }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 移除密码要求提示 -->

      <!-- 提交按钮 -->
      <button 
        class="submit-button"
        @click="submitForm"
        :disabled="submitting || !canSubmit"
      >
        {{ submitting ? '处理中...' : '确认修改密码' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { api } from '@/api';
import { navigateUtil } from '@/utils';

// 表单数据
const form = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 状态管理
const submitting = ref(false);
const showOldPassword = ref(false);
const showNewPassword = ref(false);
const showConfirmPassword = ref(false);


// 是否可以提交表单
const canSubmit = computed(() => {
  return form.value.oldPassword && 
         form.value.newPassword && 
         form.value.confirmPassword && 
         form.value.newPassword === form.value.confirmPassword &&
         form.value.newPassword.length >= 8 &&
         form.value.oldPassword !== form.value.newPassword;
});



// 切换密码可见性
const toggleOldPasswordVisibility = () => {
  showOldPassword.value = !showOldPassword.value;
};

const toggleNewPasswordVisibility = () => {
  showNewPassword.value = !showNewPassword.value;
};

const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value;
};

// 表单验证
const validateForm = () => {
  if (!form.value.oldPassword) {
    uni.showToast({ title: '请输入原密码', icon: 'none' });
    return false;
  }
  
  if (!form.value.newPassword) {
    uni.showToast({ title: '请输入新密码', icon: 'none' });
    return false;
  }
  
  if (form.value.newPassword.length < 8) {
    uni.showToast({ title: '新密码长度至少为8位', icon: 'none' });
    return false;
  }
  
  if (form.value.newPassword !== form.value.confirmPassword) {
    uni.showToast({ title: '两次输入的新密码不一致', icon: 'none' });
    return false;
  }
  
  if (form.value.oldPassword === form.value.newPassword) {
    uni.showToast({ title: '新密码不能与原密码相同', icon: 'none' });
    return false;
  }
  
  return true;
};

// 提交表单
const submitForm = async () => {
  if (!validateForm()) return;
  
  submitting.value = true;
  
  try {
    const response = await api.auth.changePassword({
      oldPassword: form.value.oldPassword,
      newPassword: form.value.newPassword
    });
    
    // 处理API响应
    if (response.code === 1) {
      uni.showToast({
        title: response.msg || '密码修改成功', 
        icon: 'success',
        duration: 2000
      });
      
      // 延迟返回上一页
      setTimeout(() => {
        goBack();
      }, 2000);
    } else {
      throw new Error(response.msg || '修改密码失败，请重试');
    }
  } catch (error) {
    console.error('修改密码失败:', error);
    uni.showToast({
      title: error.message || '网络异常，请稍后重试',
      icon: 'none',
      duration: 2500
    });
  } finally {
    submitting.value = false;
  }
};

// 返回上一页
const goBack = () => {
  if (navigateUtil && navigateUtil.back) {
    navigateUtil.back();
  } else {
    uni.navigateBack();
  }
};
</script>

<style scoped>
/* 页面基础样式 */
.change-password-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(135deg, #FFD1DC 0%, #FFB6C1 40%, #FF69B4 100%);
  position: relative;
  overflow: hidden;
}

/* 装饰背景气泡 */
.bubble {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.15);
}

.bubble-1 {
  width: 200rpx;
  height: 200rpx;
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.bubble-2 {
  width: 150rpx;
  height: 150rpx;
  top: 40%;
  right: 15%;
  animation-delay: 0.5s;
}

.bubble-3 {
  width: 180rpx;
  height: 180rpx;
  bottom: 15%;
  left: 20%;
  animation-delay: 1s;
}

.bubble-4 {
  width: 120rpx;
  height: 120rpx;
  bottom: 5%;
  right: 25%;
  animation-delay: 1.5s;
}

/* 页面头部 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  padding: 0 40rpx;
  padding-top: env(safe-area-inset-top, 40rpx);
  background: linear-gradient(135deg, #FF69B4 0%, #FF85A2 100%);
  box-shadow: 0 4rpx 20rpx rgba(255, 105, 180, 0.2);
  position: relative;
  z-index: 10;
  border-bottom-left-radius: 32rpx;
  border-bottom-right-radius: 32rpx;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.back-button:active {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(0.9);
}

.back-icon {
  font-size: 44rpx;
  color: #ffffff;
  font-weight: 500;
}

.page-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
  flex: 1;
  text-align: center;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.header-placeholder {
  width: 80rpx;
}

/* 内容区域 */
.content-wrapper {
  flex: 1;
  padding: 30rpx;
  padding-bottom: 60rpx;
}

/* 密码卡片 */
.password-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  padding: 50rpx;
  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
  backdrop-filter: blur(20rpx);
  transition: all 0.3s ease;
  animation: bounceSoft 0.8s ease;
}

.password-card:active {
  transform: scale(0.99);
}

/* 表单项 */
.form-group {
  margin-bottom: 48rpx;
  position: relative;
  padding: 10rpx 0;
  transition: all 0.3s ease;
}

.form-group:active {
  transform: translateX(4rpx);
}

.form-group:last-child {
  margin-bottom: 0;
}

.input-label {
  display: block;
  font-size: 30rpx;
  color: #888;
  margin-bottom: 16rpx;
  font-weight: 500;
}

/* 输入框 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #FFD1DC;
  padding: 20rpx 0;
  height: 160rpx;
  transition: all 0.3s ease;
  border-radius: 16rpx;
  background-color: #ffffff;
}

.input-wrapper:focus-within {
  border-bottom: 3rpx solid #FF69B4;
  box-shadow: 0 6rpx 20rpx rgba(255, 105, 180, 0.15);
  transform: translateY(-2rpx);
}

.form-input {
  flex: 1;
  font-size: 32rpx;
  color: #4A4A4A;
  padding: 30rpx 0;
  padding-right: 80rpx;
  border: none;
  outline: none;
  background-color: transparent;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  cursor: text;
  letter-spacing: 2rpx;
  line-height: 1.8;
  height: 120rpx;
  transition: all 0.3s ease;
}

.form-input::placeholder {
  color: #BDBDBD;
  font-size: 30rpx;
  letter-spacing: 0;
}

/* 眼睛图标 */
.eye-icon {
  position: absolute;
  right: 0;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100rpx;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.eye-icon:active {
  background-color: rgba(255, 105, 180, 0.1);
  transform: scale(0.9);
}

.eye-icon text {
  font-size: 48rpx;
  vertical-align: middle;
  line-height: 1;
  transition: all 0.3s ease;
}

.eye-icon:active text {
  transform: scale(1.2);
}

/* 提交按钮 */
.submit-button {
  width: 100%;
  height: 104rpx;
  line-height: 104rpx;
  background: linear-gradient(135deg, #FF69B4 0%, #FF85A2 100%);
  color: #ffffff;
  font-size: 34rpx;
  font-weight: 600;
  border-radius: 50rpx;
  border: none;
  box-shadow: 0 8rpx 30rpx rgba(255, 105, 180, 0.4);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.submit-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: all 0.5s ease;
}

.submit-button:active::before {
  left: 100%;
}

.submit-button:not(:disabled):active {
  transform: translateY(2rpx) scale(0.98);
  box-shadow: 0 4rpx 15rpx rgba(255, 105, 180, 0.3);
  opacity: 0.95;
}

.submit-button:disabled {
  background: linear-gradient(135deg, #FFD1DC 0%, #FFB6C1 100%);
  box-shadow: none;
  opacity: 0.8;
}

/* 浮动动画 */
@keyframes floatSoft {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-20rpx) scale(1.05);
  }
}

.floatSoft {
  animation: floatSoft 6s ease-in-out infinite;
}

/* 轻微弹跳动画 */
@keyframes bounceSoft {
  0% {
    transform: translateY(30rpx);
    opacity: 0;
  }
  50% {
    transform: translateY(-10rpx);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式适配 */
@media screen and (min-width: 768px) {
  .password-card {
    max-width: 600rpx;
    margin-left: auto;
    margin-right: auto;
  }
  
  .submit-button {
    max-width: 600rpx;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>